<template>
	<el-dialog class="abow-dialog" v-dialogDrag :visible.sync="visible" top="10vh" :title="type==1?'用户购买短剧记录': type==2? '用户充值记录': '用户观看记录'"
		:close-on-click-modal="false" :close-on-press-escape="false" width="850px">
		<div class="d-flex flex-column" style="min-height: 200px;max-height: 500px;">
			<div class="d-flex flex-row font-md mb-10">
				<div class="d-flex text-orangedeep">
					{{'用户ID '+userInfoData.id}} 
				</div>
			</div>
			<div  v-if="type==3" class="d-flex b-s mt-2 mb-10 j-sb" slot="header">
					<el-form class="d-flex b-s" style="flex-wrap: wrap;" :inline="true" size="small" 
						>
						
						<el-form-item  label="短剧搜索" class="mr-20 mb-10">
							<el-select id="lianjie" filterable clearable v-model="diyduanju" placeholder="请选择短剧" >
								<el-option v-for="(item,index) in duanju" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="日期 " class="mr-20 mb-10">
							<el-date-picker style="width: 300px;" v-model="diycreated_at" type="daterange" range-separator="至"
							value-format="timestamp" :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item  class="mb-10">
							<el-button icon="el-icon-search" type="primary" @click="getTableList(true)">查询</el-button>
						</el-form-item>
					</el-form>
				
				</div>
			<template v-if="type==1&&Array.isArray(userBuyData)&&userBuyData.length">
				<vxe-table :key="type" class="mb-20" ref="xTable" border height="500px" resizable :data="userBuyData">
					<vxe-column width="120" field="playlet_id" title="短剧ID" sortable align="center"></vxe-column>
					<vxe-column width="200" field="playlet_name" title="短剧名称" align="center"></vxe-column>
					<vxe-column width="150" field="amount" title="消耗看币" sortable align="center"></vxe-column>
					<vxe-column width="150" field="playlet_number" title="短剧集数" sortable align="center"></vxe-column>
					<vxe-column :width="userBuyData.length>=9?150:170" field="create_at" title="购买时间" sortable align="center"></vxe-column>
					<template #empty></template>
				</vxe-table>
			</template>
			<template v-if="type==2&&Array.isArray(userBuyData)&&userBuyData.length">
				<vxe-table :key="type" class="mb-20" ref="xTable" border height="500px" resizable :data="userBuyData">
					<vxe-column width="120" field="amount" title="充值金额" sortable align="center"></vxe-column>
					<vxe-column width="150" field="ml_coin" title="永久看币" sortable align="center"></vxe-column>
					<vxe-column width="150" field="give_coin" title="赠送看币" sortable align="center"></vxe-column>
					<vxe-column width="150" field="is_vip" title="充值类型" align="center">
						<template v-slot="{ row }">
							<div>{{row.is_vip==0?'非会员充值':'会员充值'}}</div>
						</template>
					</vxe-column>
					<vxe-column :width="userBuyData.length>=9?200:220" field="create_at" title="购买时间" sortable align="center"></vxe-column>
					<template #empty></template>
				</vxe-table>
			</template>
			<template v-if="type==3&&Array.isArray(userBuyData)&&userBuyData.length">
				<vxe-table :key="type" class="mb-20 diydiy" style="width: 736px;" ref="xTable" border height="450px" width="720px" resizable :loading="loading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}" :data="userBuyData">
					<vxe-column width="120" field="playlet_id" title="短剧ID" sortable align="center"></vxe-column>
					<vxe-column width="200" field="playlet_name" title="短剧名称" align="center"></vxe-column>
					<vxe-column width="150" field="playlet_number" title="短剧集数" sortable align="center"></vxe-column>
					<vxe-column width="250" field="view_at" title="观看时间" sortable align="center"></vxe-column>
				</vxe-table>
			</template>
			
			
			<!-- 数据空/格式不对 -->
			<template v-if="Array.isArray(userBuyData)">
				<template v-if="!userBuyData.length">
					<el-empty :image-size="180" :description="type==1?'暂无该用户的购买短剧记录': type==2?'暂无该用户的充值记录':'暂无该用户的观看记录'"></el-empty>
				</template>
			</template>
			<template v-else>
				<el-empty :image-size="180" :description="type==1?'暂无该用户的购买短剧记录': type==2?'暂无该用户的充值记录':'暂无该用户的观看记录'"></el-empty>
			</template>
		</div>
	
		<template v-if="type==3" slot="footer">
			<vxe-pager style="text-align: center;" background size="medium" align="right" :border="false" :current-page="diypage"
						:page-size="diypageSize" :total="diytotal" :pageSizes="[20,50,100,150,200]"
						:layouts="['PrevPage', 'JumpNumber','NextPage', 'Sizes', 'FullJump', 'Total']"
						@page-change="handlePageChange">
			</vxe-pager>
		</template>
	</el-dialog>
</template>

<script>
	let that;
	export default {
		components: {
		},
		
		props: {
			duanju: {
				type: Array,
				default: []
			}
		
		},
		data() {
			return {
				loading:true,
				type:1,
				userId:null,
				visible:false,
				userInfoData: {},
				userBuyData: [],
				activeNames:[1],
			
				diypage:1,
				diypageSize:20,
				diytotal:null,
				sData:null,
				diycreated_at:null,
				diyduanju:null,
				pickerOptions:{
					onPick:({maxDate,minDate}) =>{
						if(minDate  && this.pickerMinDate){
							this.pickerMinDate = null;
						}else if(minDate){
							this.pickerMinDate = minDate.getTime();
						}
					},
					disabledDate:(time)=>{
						if(this.pickerMinDate){
							const day1 = 60 * 24 * 3600 * 1000
							let maxTime = this.pickerMinDate + day1
							let minTime = this.pickerMinDate - day1
							return time.getTime() > maxTime || time.getTime() < minTime || time.getTime() > Date.now()
						}else{
							return time.getTime() > Date.now()
						}
					}
				}
			}
		},
		created() {},
		mounted() {
			that = this;
			// console.log(133)
		},
		computed: {
			dataRule() {
				return {
					videos: [{
						required: true,
						message: '视频不能为空!',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		watch: {},
		methods: {
			
			handlePageChange(e) {
		
				this.diypageSize = e.pageSize
				
				this.diypage = e.currentPage;
				this.getTableList();
			},
			async getTableList(or){
				this.loading = true;
				let sData = JSON.parse(JSON.stringify(this.sData)) 
				
				if(or){
					this.diypage = 1 
				}
				if(this.diycreated_at){

					sData.view_at = this.diycreated_at
					// sData.view_at[1] =  Number(sData.view_at[1]) + (1000 * 60 * 60 * 24 - 1000 )
				}
				console.log(170,this.diyduanju)
				if(this.diyduanju){
					sData.playlet_id = this.diyduanju
					
				}else{
					delete sData.playlet_id
				}
				let diytime =  new Date(Number(sData.view_at[1]))
				diytime.setHours(0, 0, 0, 0)
				sData.view_at[1] =  diytime.getTime() + (1000 * 60 * 60 * 24 - 1000 )
				console.log(181,sData.view_at)
				sData.pageSize = this.diypageSize
				sData.page = this.diypage
				let sRes = await this.$axios.post('/api/delivery/UserStatistics/getUserView',sData);
				this.userBuyData = sRes.data;
				this.diytotal= sRes.total
				this.loading = false;
			},
			init(row,buyInfo,sData) {
				console.log(85,sData)
				let that = this
				this.visible = true;
				this.$nextTick(()=>{
					this.userInfoData = row;
					this.sData = sData;
					if(this.type==3){
						if(buyInfo){
							that.loading = true;
							that.diypage = 1;
							that.diypageSize = 20 ;
							that.diycreated_at=null;
							that.diyduanju=null;
							that.diytotal= buyInfo.total
							that.diycreated_at = sData.view_at
							that.userBuyData = buyInfo.data;
							that.loading = false;
							console.log(92,that.userBuyData);
							return
						}
					}else{
						if(Array.isArray(buyInfo)){
							if(buyInfo.length){
								// this.userBuyData = [...buyInfo,...buyInfo,...buyInfo];
								this.userBuyData = buyInfo;
								console.log(92,this.userBuyData);
								return
							}
						}
					}
					
					this.userBuyData = [];
					
				})
			},
		
		
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.el-dialog__header) {
		padding: 20px 28px 10px 28px !important;
	}
	:deep(.el-dialog__body) {
		padding: 10px 30px 45px 30px !important;
	}
</style>